<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red
        }

        /* div class同时满足两个条件 */
        div.red {
            font-size: 30px;
        }

        /* 元素选择器 类选择器 */
        /* 这叫交集选择器  */
        /* 就是选中同时符合多个条件的元素 */
        /* 这是并且的关系 div.red的条件  */
        /* 交集选择器中有元素选择器 必须以元素选择器开头  */
        /* 一般情况用不到#来做选择器  */
        /* 也有选择器分离，并集选择器  同时选择多个选择器对应的元素 */
        /* 每个选择器之间写一个逗号，即选1又选2 
    这里逗号代表或者意思 选择1或者选择2 */
        /* 并集选择器使用id也可以 */
    </style>
</head>

<body>
    <div class="red">我是div</div>
    <p class="red">我是p元素</p>
</body>

</html>